import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import '@/customized/axios/axios'

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import VueI18n from 'vue-i18n'

import 'normalize.css/normalize.css' /*引入重置样式，在node_modules中*/
import '@/assets/customized/common.css'; /*引入公共样式*/

//import mockData from '@/customized/mock/mock.js';
//import mockData2 from '@/customized/mock/mock2.js';

/**
 * 通过插件的形式挂载各项组件
 */
Vue.use(ElementUI);
Vue.use(VueI18n); // 通过插件的形式挂载

/**
 * 阻止启动生产消息
 * @type {boolean}
 */
Vue.config.productionTip = false

/**
 * 国际化页面的配置
 * @type {VueI18n}
 */
const i18n = new VueI18n({
  locale: 'zh-CN', // 语言标识 en-US or zh-CN
  messages: {
    'zh-CN': require('@/customized/i18n/cn'), // 中文语言包
    'en-US': require('@/customized/i18n/en') // 英文语言包
  }
})

/**
 * 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例来启动的：
 */
const vue = new Vue({
  i18n,
  /**
   * 将页面路由组件注册到Vue中，并初始化
   * 这样Vue会将 router “注入”到每一个子组件中，每个组件都可以通过 this.$router 来访问全局单例对象 router。
   */
  router,
  /**
   * 将状态管理组件注册到Vue中，并初始化
   * 这样Vue会将 store “注入”到每一个子组件中，每个组件都可以通过 this.$store 来访问全局单例对象 store。
   */
  store,
  /**
   *  createElement(也就是h)是vuejs里的一个函数。这个函数的作用就是生成一个 VNode节点，
   *  render 函数得到这个 VNode 节点之后，返回给 Vue.js 的 mount 函数，渲染成真实 DOM 节点，并挂载到根节点上。
   * @param h
   * @returns {*}
   */
  render: h => h(App)
}).$mount('#app')

/**
 * 增加一个全局引用Vue的方式
 * @type {Vue | any}
 */
Vue.prototype.$vue = vue;
